<style>
    /* th, td {
         white-space: nowrap;
     }

     div.dataTables_wrapper {
         width: 100%;
         margin: 0 auto;
     }*/

    .tabliv {
        display: none;
    }
    .list-inline{width: 100%;}
    .list-inline li{float:left;width:33%; padding: 4px 20px;}

    .tabliv > table th, .tabliv > table td {
        padding: 8px;
        border-bottom: 1px solid #555;
    }
</style>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">FBA库存销量表(FBA备货参数)</h3></div>
            <div class="panel-body">
                <div class="btn-group" style="float: right">
                    <button type="button" class="btn btn-default single_download" data-name="inventory">实时库存</button>
                    <button type="button" class="btn btn-default single_download" data-name="unsuppressedInventory">实时国际在途库存</button>
                    <button type="button" class="btn btn-default single_download" data-name="sale">30天销量明细</button>
                </div>
                <div>
                    <p>
                        <span style="color: #91bef0"><b>Tip:</b></span><br>
                        1.输入的SKU不能超<span style="color: red"><b>5个</b></span>,超过5个请上传文件;<br>
                        2.SKU分割的逗号要用<span style="color: red">英文  <b>','</b>  </span>符号;<br>
                        3.周销量为0的sellerSKU查不出数据;<br>
                        4.右上角三个按钮能分别导出所有账号的不同类型的数据<br>
                    </p>
                </div>

                <form id="form" action="__URL__/exportReport" method="POST">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="col-sm-12 col-md-5  add-space">
                                    <div class="input-group input-group-md">
                                        <span class="input-group-addon">SKU</span>
                                        <input class="form-control " placeholder="A301,A302,A303" name="sku"
                                               data-name-group="" type="text" value="" >
                                    </div>
                                </div>
                                <div class="col-md-4 add-space">
                                    <input id="select" class="btn btn-primary " type="button" value="搜索">
                                    <button id="up_download" class="btn btn-primary btn-success" type="button"
                                            data-toggle="modal" data-target="#btn_import">上传下载</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <hr>
                <div id="onWayStock"></div>
                <div style="min-width:1000px;max-width:100%;overflow-x:scroll">
                    <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>销售员</th>
                        <th>站点</th>
                        <th>店铺帐号</th>
                        <th>SellerSKU</th>
                        <th>ASIN</th>
                        <th>日均销量</th>
                        <th>公司SKU</th>
                        <th>品名</th>
                        <th>FBA库存</th>
                        <th>国际在途</th>
                        <th>空运在途</th>
                        <th>海运在途</th>
                        <th title='销售确认至待发货间的"国际在途"'>待发货数</th>
                        <th>销售状态</th>
                        <th>有棵树电子商务有限公司(可用库存)</th>
                        <th>有棵树电子商务有限公司(在途库存)</th>
                        <th>杭州有棵树科技有限公司(可用库存)</th>
                        <th>杭州有棵树科技有限公司(在途库存)</th>
                        <th>深圳市有棵树科技股份有限公司(可用库存)</th>
                        <th>深圳市有棵树科技股份有限公司(在途库存)</th>
                        <th>深圳市有棵树电子商务有限公司(可用库存)</th>
                        <th>深圳市有棵树电子商务有限公司(在途库存)</th>
                        <th>总可用库存</th>
                        <th>总在途库存</th>
                    </tr>
                    </thead>
                    <tbody id="pageData">
                    </tbody>
                </table>
                </div>

            </div>
        </div>
    </div>
</div>

<!--导入文件 -->
<div class="modal fade" id="btn_import">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h4 class="modal-title">导入文件<span style="color: red">（导入请使用xlsx类型的）</span></h4>
            </div>
            <form action="__URL__/upload_sku" method="post" enctype="multipart/form-data" id="upSku">
                <div class="modal-body form-horizontal">
                    <div class="alert alert-info top20" role="alert">
                        <p>模板下载: <a href="javascript:void(0)" id="download" >模板</a></p></div>

                    <div class="form-group"><label class="col-md-3 control-label required">上传文件</label>

                        <div class="col-md-4"><input name="file" class="form-control" data-val="true"
                                                     data-val-required="请选择[上传文件]!" id="File" type="file" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <button id="submit-button" type="submit" class="col-md-offset-3 col-md-1 btn btn-danger">上传
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            <button type="button" class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('select.chosen-select').chosen({
            no_results_text:'没有找到',   // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 2个以下的选择项则不显示检索框
            search_contains: true        // 从任意位置开始检索
        });
    });
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $("#select").click(function(){
            $('#page').val(1);
            getData();
        });

        $("#download").click(function () {
            var fileName="sku导入模板";
            var list= new Array(["公司SKU"]);
            var list1= new Array(["A301"]);
            window.location.href ="__URL__/skuDownload?"+"&fileName="+fileName+"&list="+list+"&list1="+list1;
        });

        $(".single_download").click(function () {
            var downloadType = $(this).data("name");
            window.location.href = "__URL__/singleDownload?" + "&downloadType=" + downloadType;
        })
    });

    /**
     * 获取当页数据
     */
    function getData(){

        $.ajax({
            type: 'POST',
            url: '__URL__/getReport',
            data: $('#form').serialize(),
            dataType:'json',
            success:function(arr){
                if (arr.count) {
                    layer.msg(arr.message, {icon : 5});
                    window.location.reload();
                    return;
                }
                var list = arr;
                var content = '';
                if(typeof(list) == "undefined"){
                    content = '';
                }
                else{
                    i=0;
                    $.each(list,function(index,array){ //遍历json数据列
                        if(!array['private_sku']) array['private_sku'] = '';
                        if(!array['item']) array['item'] = '';
                        content += "<tr>";
                        content += "<td>"+array['sellerName']+"</td>";
                        content += "<td>"+array['shorthand_code']+"</td>";
                        content += "<td>"+array['accountName']+"</td>";
                        content += "<td>"+array['sku']+"</td>";
                        content += "<td>"+array['asin']+"</td>";
                        content += "<td>"+array['daysale']+"</td>";
                        content += "<td>"+array['private_sku']+"</td>";
                        content += "<td>"+array['item']+"</td>";
                        content += "<td>"+array['inventory']+"</td>";
                        content += "<td>"+array['unsuppressedInventory']+"</td>";
                        content += "<td>"+array['air']+"</td>";
                        content += "<td>"+array['ocean']+"</td>";
                        content += "<td>"+array['homeNum']+"</td>";
                        content += "<td>"+array['saleStatus']+"</td>";
                        content += "<td>"+array['1:actual']+"</td>";
                        content += "<td>"+array['1:onway']+"</td>";
                        content += "<td>"+array['2:actual']+"</td>";
                        content += "<td>"+array['2:onway']+"</td>";
                        content += "<td>"+array['3:actual']+"</td>";
                        content += "<td>"+array['3:onway']+"</td>";
                        content += "<td>"+array['4:actual']+"</td>";
                        content += "<td>"+array['4:onway']+"</td>";
                        content += "<td>"+array['totalActual']+"</td>";
                        content += "<td>"+array['totalOnway']+"</td>";
                        content += "</tr>";
                    });
                    /*if (onWayList.length != 0) {
                        $('#onWayStock').html('');
                        onWayContent = '<table class="table table-striped  table-hover">' +
                                '<thead><tr><th width="20%">主体</th><th>实际库存</th><th>在途库存</th></tr></thead>';
                        onWayContent += '<tbody>';

                        for (var sku in onWayList)
                            for (var num in enterprise) {
                                onWayContent += "<tr>";
                                onWayContent += "<td>" + enterprise[num] + "</td>";
                                onWayContent += "<td>" + onWayList[sku]['actualStock'][num] + "</td>";
                                onWayContent += "<td>" + onWayList[sku]['onWayStock'][num] + "</td>";
                                onWayContent += "</tr>";
                            }

                        }*/

                        //onWayContent += "</tbody></<table>";

                        //$('#onWayStock').html(onWayContent);
                    }
                $('#pageData').html(content);

            },
            error:function(){
                layer.msg("数据未找到,请检查公司SKU输入是否正确!", {icon : 5});
            }
        });
    }
</script>
